<template>
  <div class="addEdit-block">
    <el-form
        class="detail-form-content"
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        style="background-color: #ffffff;"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item class="input" v-if="type!='info'" label="账号" prop="zhanghao">
            <el-input v-model="ruleForm.zhanghao"
                      placeholder="账号" clearable :readonly="ro.zhanghao"></el-input>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="账号" prop="zhanghao">
              <el-input v-model="ruleForm.zhanghao"
                        placeholder="账号" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" v-if="type!='info'" label="密码" prop="mima">
            <el-input v-model="ruleForm.mima"
                      placeholder="密码" clearable :readonly="ro.mima"></el-input>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="密码" prop="mima">
              <el-input v-model="ruleForm.mima"
                        placeholder="密码" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" v-if="type!='info'" label="昵称" prop="nicheng">
            <el-input v-model="ruleForm.nicheng"
                      placeholder="昵称" clearable :readonly="ro.nicheng"></el-input>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="昵称" prop="nicheng">
              <el-input v-model="ruleForm.nicheng"
                        placeholder="昵称" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item class="select" v-if="type!='info'" label="性别" prop="xingbie">
            <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
              <el-option
                  v-for="(item,index) in xingbieOptions"
                  v-bind:key="index"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="性别" prop="xingbie">
              <el-input v-model="ruleForm.xingbie"
                        placeholder="性别" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" v-if="type!='info'" label="手机" prop="shouji">
            <el-input v-model="ruleForm.shouji"
                      placeholder="手机" clearable :readonly="ro.shouji"></el-input>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="手机" prop="shouji">
              <el-input v-model="ruleForm.shouji"
                        placeholder="手机" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" v-if="type!='info'" label="邮箱" prop="youxiang">
            <el-input v-model="ruleForm.youxiang"
                      placeholder="邮箱" clearable :readonly="ro.youxiang"></el-input>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="邮箱" prop="youxiang">
              <el-input v-model="ruleForm.youxiang"
                        placeholder="邮箱" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-form-item class="btn">
        <el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
        <el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
        <el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import {isNumber, isIntNumer, isEmail, isPhone, isMobile, isURL, checkIdCard} from "@/utils/validate";

export default {
  data() {
    let self = this
    var validateIdCard = (rule, value, callback) => {
      if (!value) {
        callback();
      } else if (!checkIdCard(value)) {
        callback(new Error("请输入正确的身份证号码"));
      } else {
        callback();
      }
    };
    var validateUrl = (rule, value, callback) => {
      if (!value) {
        callback();
      } else if (!isURL(value)) {
        callback(new Error("请输入正确的URL地址"));
      } else {
        callback();
      }
    };
    var validateMobile = (rule, value, callback) => {
      if (!value) {
        callback();
      } else if (!isMobile(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        callback();
      } else if (!isPhone(value)) {
        callback(new Error("请输入正确的电话号码"));
      } else {
        callback();
      }
    };
    var validateEmail = (rule, value, callback) => {
      if (!value) {
        callback();
      } else if (!isEmail(value)) {
        callback(new Error("请输入正确的邮箱地址"));
      } else {
        callback();
      }
    };
    var validateNumber = (rule, value, callback) => {
      if (!value) {
        callback();
      } else if (!isNumber(value)) {
        callback(new Error("请输入数字"));
      } else {
        callback();
      }
    };
    var validateIntNumber = (rule, value, callback) => {
      if (!value) {
        callback();
      } else if (!isIntNumer(value)) {
        callback(new Error("请输入整数"));
      } else {
        callback();
      }
    };
    return {
      id: '',
      type: '',
      ro: {
        zhanghao: false,
        mima: false,
        nicheng: false,
        xingbie: false,
        shouji: false,
        youxiang: false,
      },
      ruleForm: {
        zhanghao: '',
        mima: '',
        nicheng: '',
        xingbie: '',
        shouji: '',
        youxiang: '',
      },
      xingbieOptions: [],
      rules: {
        zhanghao: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
        ],
        mima: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],
        nicheng: [
          { required: true, message: '昵称不能为空', trigger: 'blur' },
        ],
        xingbie: [
          { required: true, message: '性别不能为空', trigger: 'change' },
        ],
        shouji: [
          { validator: validateMobile, trigger: 'blur' },
        ],
        youxiang: [
          { validator: validateEmail, trigger: 'blur' },
        ],
      }
    };
  },
  props: ["parent"],
  computed: {},
  created() {
    this.xingbieOptions = "男,女".split(',')
  },
  methods: {
    // 下载
    download(file) {
      window.open(`${file}`)
    },
    // 初始化
    init(id, type) {
      if (id) {
        this.id = id;
        this.type = type;
      }
      if (this.type == 'info' || this.type == 'else') {
        this.info(id);
      } else if (this.type == 'logistics') {
        this.logistics = false;
        this.info(id);
      }
    },
    // 多级联动参数
    info(id) {
      this.$http({
        url: `yonghu/info/${id}`,
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.ruleForm = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 提交
    onSubmit() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: `yonghu/${!this.ruleForm.id ? "save" : "update"}`,
            method: "post",
            data: this.ruleForm
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.parent.showFlag = true;
                  this.parent.addOrUpdateFlag = false;
                  this.parent.search();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 获取uuid
    getUUID() {
      return new Date().getTime();
    },
    // 返回
    back() {
      this.parent.showFlag = true;
      this.parent.addOrUpdateFlag = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.addEdit-block {
  margin: auto;
  width: 100%;
  padding: 20px;
  .detail-form-content {
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  .btn {
    text-align: center;
    margin-top: 20px;
    .btn-success {
      padding: 12px 18px;
      background-color: #4a90e2;
      border-color: #4a90e2;
      color: #ffffff;
      margin-right: 10px;
    }
    .btn-close {
      padding: 12px 18px;
      border-color: #DCDFE6;
      color: #606266;
    }
  }
}
</style>
